<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转按钮</title>
</head>
<style>
    ul{
        list-style: none;
    }
    ul>li{
        float: left;
        margin: 10px;
    }
    ul>li>a>img:hover{
        transform: scale(1.2) rotate(360deg);
    }
    img{
        transition: all 0.8s ease-in-out;
        /*这段代码主要是使得鼠标移动上去后，有一个展现最终效果的过程，*/
        /*而不是鼠标落于上面后最终效果直接展示了出来而肉眼看不到过程*/
    }
</style>
<body>
<h1>旋转按钮</h1>
<ul>
    <li><a href="#"><img src="img/delicious.png" alt=""></a></li>
    <li><a href="#"><img src="img/facebook.png" alt=""></a></li>
    <li><a href="#"><img src="img/rss.png" alt=""></a></li>
    <li><a href="#"><img src="img/twitter.png" alt=""></a></li>
    <li><a href="#"><img src="img/yahoo.png" alt=""></a></li>
</ul>
</body>
</html>